{"componentChunkName":"component---src-templates-blog-post-js","path":"/Today I Learned/wrap_observably/","result":{"data":{"site":{"siteMetadata":{"title":"JULog","author":"[Ju Chan Hwang]","siteUrl":"https://julog.netlify.app","comment":{"disqusShortName":"","utterances":"JuChanHwang/gatsby-starter-bee"},"sponsor":{"buyMeACoffeeId":"jbee"}}},"markdownRemark":{"id":"acd6ef72-c15d-5fb4-b1b0-bd3bd34e72d5","excerpt":"ISSUE 카카오 맵 sdk 사용 카카오 맵에서 네이버 맵, 구글 맵으로 바로 바꿀 수 있도록 추상화를 하기 카카오 맵메소드 추상화 서비스로 파일 분리 옵저버블한 상태로 변경 추상화하기 전 로직 main.ts 추상화 후 로직 main.ts 서비스를 사용하는 쪽에서는 서비스 내부로직에서 무엇을 하는지 모름 내부 로직이 어떻게 생겼는지는 모르지만 필요한 파라미터만 넘겨주면 됨 service.ts 서비스 내부 로직","html":"

ISSUE

\n\n

추상화하기 전 로직

\n
\n

main.ts

\n
\n
navigator.geolocation.getCurrentPosition((result) => {\n    const geocoder = new kakao.maps.services.Geocoder();\n    geocoder.coord2RegionCode(result.coords.longitude, result.coords.latitude, (coordRes, status) => {\n      if (status === kakao.maps.services.Status.OK) {\n        this.api.getDistrictFromCode(coordRes[0].code).pipe(\n          tap(([ city = '', district = '', town = '' ]) => {\n            this.formGroup.patchValue({\n              city, district, town,\n              position: [ result.coords.latitude, result.coords.longitude ]\n            });\n          })\n        ).subscribe();\n      } else {\n        console.error(status);\n      }\n    });\n  },\n);
\n

추상화 후 로직

\n
\n

main.ts

\n
\n
this.geolocation.getCurrentPosition().pipe(\n\t\tmergeMap((result) => {\n      return this.geolocation.coord2RegionCode(result.longitude, result.latitude).pipe(\n        mergeMap((regionCode: string) => {\n          return this.api.getDistrictFromCode(regionCode).pipe(\n            tap(([ city = '', district = '', town = '' ]) => {\n              this.formGroup.patchValue({\n                city, district, town,\n                position: [ result.latitude, result.longitude ]\n              });\n            }),\n          )\n        })\n      )\n    }),\n).subscribe()
\n\n
\n

service.ts

\n
\n
coord2RegionCode(longitude: number, latitude: number) {\n    return new Observable(observer => {\n      kakao.maps.load(() => {\n        const geocoder = new kakao.maps.services.Geocoder();\n        geocoder.coord2RegionCode(longitude, latitude, (coordRes, status) => {\n          if (status === kakao.maps.services.Status.OK) {\n            observer.next(coordRes[0].code);\n            observer.complete();\n          } else {\n            observer.error(status);\n          }\n        });\n      });\n    });\n  }
\n","frontmatter":{"title":"Wrap Observably","date":"July 08, 2020"}}},"pageContext":{"slug":"/Today I Learned/wrap_observably/","previous":{"fields":{"slug":"/Today I Learned/bottom_navigation_transition/"},"frontmatter":{"title":"Bottom Navigation Scrolling","category":"Today I Learned","draft":false}},"next":{"fields":{"slug":"/TypeScript/@types_typeRoots_and_types/"},"frontmatter":{"title":"@types, typeRoots and types","category":"TypeScript","draft":false}}}},"staticQueryHashes":["3128451518","96099027"]}